<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>Spweb admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form" lay-filter="admin-info">
                <input type="hidden" name="id" value="">
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        用户名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="username" name="username" required="" lay-verify="required"
                            autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        用于登录系统
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="phone" class="layui-form-label">
                        手机
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="phone" name="phone" required="" lay-verify="phone" autocomplete="off"
                            class="layui-input">
                    </div>

                </div>
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        邮箱
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_email" name="email" required="" lay-verify="email" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">
                        新密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_pass" name="password" lay-verify="password"
                            autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        8到16个数字、字母、下划线、特殊符号
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_old_pass" class="layui-form-label">
                        旧密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_old_pass" name="old_password" lay-verify="old_password"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_avatar" class="layui-form-label">账号头像</label>
                    <div class="layui-input-inline" id="avatar-html">
                        <input type="file" id="L_avatar" name="pic" class="layui-input"
                            accept=".png,.jpg,.jpeg,.bmp,.gif">
                        <input type="hidden" name="avatar" autocomplete="off" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button class="layui-btn" lay-filter="add" lay-submit="">
                        修改
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer', 'upload'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer,
                    id = window.func.paserUrlParam('id');

                $.ajax({
                    url: window.config.api_url + 'spadmin/admin/profile',
                    method: 'get',
                    data: {},
                    dataType: 'json',
                    processData: true,
                    cache: false,
                    headers: {
                        token: window.config.token,
                        rtime: window.func.getTime()
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            var info = res.data;
                            form.val('admin-info', {
                                id: id,
                                username: info.username,
                                phone: info.phone,
                                email: info.email
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    },
                    error: function () {
                        window.func.error();
                    }
                });


                // 图片上传
                var uploadInst = layui.upload.render({
                    elem: '#L_avatar', //绑定元素
                    url: window.config.api_url + 'api/upload/imageupload', //上传接口
                    headers: {
                        token: window.config.token,
                        rtime: window.func.getTime()
                    },
                    acceptMime: 'image/jpg, image/png,image/jpeg,image/bmp,image/gif',
                    auto: true,
                    method: 'post',
                    done: function (res) {
                        //上传完毕回调
                        // console.log(res);
                        if (res.code == 0) {
                            layer.msg('图片上传成功', {
                                icon: 6,
                                time: 500
                            }, function () {
                                var str =
                                    `<input type="text" id="L_avatar" class="layui-input" value="${res.data.path}" disabled><input type="hidden" name="avatar" autocomplete="off" value="${res.data.path}">`;
                                $('#avatar-html').html(str);
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000
                            });
                            return false;
                        }
                    },
                    error: function () {
                        //请求异常回调
                        window.func.error();
                    }
                });


                //自定义验证规则
                form.verify({
                    username: function (value) {
                        if (value && value.length < 2) {
                            return '用户名不能少于 2 个字符';
                        }
                    },
                    phone: function (val) {
                        if (val && !window.config.reg.phone.test(val)) {
                            return '手机号格式错误';
                        }
                    },
                    email: function (val) {
                        if (val && !window.config.reg.email.test(val)) {
                            return '邮箱账号格式错误';
                        }
                    },
                    password: function (val) {
                        if (val && !window.config.reg.passwd.test(val)) {
                            return '密码格式错误';
                        }
                    },
                    old_password: function(val) {
                        if ($('#L_pass').val()) {
                            if (!val) {
                                return '必须填写旧密码才可修改密码';
                            }
                        }
                    }
                });

                //监听提交
                form.on('submit(add)', function (data) {
                    // console.log(data);
                    //发异步，把数据提交给php
                    $.ajax({
                        url: window.config.api_url + 'spadmin/admin/updateadmininfo',
                        method: 'post',
                        data: data.field,
                        dataType: 'json',
                        processData: true,
                        cache: false,
                        headers: {
                            token: window.config.token,
                            rtime: window.func.getTime()
                        },
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg('修改成功', {
                                    icon: 6,
                                    time: 1000
                                });
                                setTimeout(function () {
                                    // 可以对父窗口进行刷新 
                                    xadmin.father_reload();
                                    //关闭当前frame
                                    xadmin.close();
                                }, 1000);
                            } else {
                                layer.msg(res.msg, {
                                    icon: 5,
                                    time: 1000
                                });
                            }
                        },
                        error: function () {
                            window.func.error();
                        }
                    });
                    return false;
                });

            });
    </script>
</body>

</html>